<template>
    <el-card>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="一级分类">
                <el-select v-model="category1Id" placeholder="请选择" @change="getCategory2List">
                    <el-option v-for="item in category1List" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select v-model="category2Id" placeholder="请选择" @change="getCategory3List">
                    <el-option v-for="item in category2List" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="category3Id" placeholder="请选择" @change="category3Change(category1Id,category2Id,category3Id)">
                    <el-option v-for="item in category3List" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
    name: 'Category',
    data: () => ({
        category1Id: '',
        category2Id: '',
        category3Id: '',
    }),
    computed: {
        ...mapState({
            category1List: state => state.category.category1List,
            category2List: state => state.category.category2List,
            category3List: state => state.category.category3List
        })
    },
    methods: {
        ...mapActions('category', ['getCategory1List']),
        getCategory2List (){
            this.category2Id = ''
            this.category3Id = ''
            this.$store.dispatch('category/getCategory2List', this.category1Id)
        },
        getCategory3List (){
            this.category3Id = ''
            this.$store.dispatch('category/getCategory3List', this.category2Id)
        }
    },
    props: ['category3Change'],
    mounted() {
        this.getCategory1List()
    }
}
</script>

<style scoped></style>
